import { useEffect } from "react";
import styles from "./MapContainer.css";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Anchor } from "antd";

export default function MapContainer() {
    let map = null;

    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "7ffe1e8647e015e1c2d7af56262573b3",
        };
        AMapLoader.load({
            key: "6e0fd473efda2d123c691f487be5e78f", 
            version: "2.0", // 指定要加载的 JSAPI 的版本
            plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 14, // 初始化地图级别
                    center: [115.32252, 38.949597], // 初始化地图中心点位置
                    pitch: 40,
                    resizeEnable: true,   
                    showLabel: true,
                    mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
                });
                new AMap.Loca.container({
                    map: new AMap.Map(MapContainer.current),
                    // loca: new Loca.Container({
                        
                    // })
                })              
            })
            .catch((e) => {
                console.log(e);
            });

   


        return () => {
            map?.destroy();
        };
    }, []);

    return (


        <div>
            <div
                id="container"
                className={styles.container}
                style={{ height: '100vh' }}
            >

            </div>
            <div id="map"></div>
        </div>

    );
}